/*
 * @Author: xiaosihan 
 * @Date: 2024-01-07 00:55:31 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-07 06:37:02
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./componentNamesModal.module.less";
import { Button, Modal, message } from "antd";
import componentNames from "@/pages/product/componentNames";


interface Iprops {
    children?: ReactNode
}

// 查看命名的配置弹窗
export default function ComponentNamesModal(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [open, setOpen] = useState(false);
    const [messageApi, contextHolder] = message.useMessage();

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    const handleCopy = (text: string) => {
        navigator.clipboard.writeText(text);
        messageApi.success(`${text} 已复制到剪贴板`);
    }

    return (
        <>
            {contextHolder}
            <Button
                type="primary"
                className={styles.btn}
                onClick={() => setOpen(true)}
            >查看模型命名</Button>
            <Modal
                title="模型命名"
                width={1000}
                centered={true}
                open={open}
                onCancel={() => setOpen(false)}
                onOk={() => setOpen(false)}
                footer={false}
                maskClosable={false}
            >
                <div className={styles.componentNamesModal} >

                    {
                        componentNames.map((s, i) => {
                            return (
                                <div className={styles.style_block} key={i} >
                                    <div className={styles.title} key={i} >{s.style}</div>
                                    {
                                        s.component.map(c => {
                                            return (

                                                <div className={styles.item} key={i} >
                                                    <span className={styles.name} >{c.name}</span>
                                                    <span
                                                        className={styles.key}
                                                        onClick={() => handleCopy(c.key)}
                                                    >{c.key}</span>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            );
                        })
                    }
                </div>
            </Modal>
        </>
    );

}